<template>
  <div class="container">
    <div class="page-title">收藏列表</div>
    <div class="info-wrap">
      <!-- <div class="action">
        <label>
          <input type="checkbox" v-model="isAll" @change="changeAll" />
        </label>
        全选
      </div>
      <div class="action">
        已选：<span>{{ selectedCount }}</span>
      </div>
      <div class="action" @click="unbookmarkSelected()" style="cursor: pointer">
        取消收藏
      </div>
      <div class="action" style="cursor: pointer" @click="downloadSelected()">
        批量下载
      </div> -->
      <el-input
        v-model="searchContent"
        placeholder="搜索"
        size="medium"
        style="width: 200px; float: right; margin-bottom: 10px"
      ></el-input>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="filterData"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-style="{ cursor: 'pointer' }"
        :header-cell-style="{ 'text-align': 'center' }"
        @row-click="to_paper_info"
      >
        <!-- <el-table-column width="40px" align="center">
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isSelected"
              @change="handleSelectionChange(scope.row.no)"
            ></el-checkbox>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="no"
          label="序"
          width="70"
          align="center"
          :column-key="0"
        >
        </el-table-column>
        <el-table-column prop="title" label="标题" width="230" :column-key="1">
        </el-table-column>
        <el-table-column
          prop="authors"
          label="作者"
          width="180"
          :column-key="2"
        >
          <template slot-scope="scope">
            <div>
              {{ calcAuthor(scope.row.authors) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="venue" label="来源" width="190" :column-key="3">
          <template slot-scope="scope">
            <div v-if="scope.row.venue">
              {{ scope.row.venue.raw }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="year"
          label="年份"
          width="90"
          align="center"
          :column-key="4"
        >
        </el-table-column>
        <el-table-column
          prop="n_citation"
          label="被引量"
          width="90"
          align="center"
          :column-key="5"
        >
        </el-table-column>
        <el-table-column
          prop="action"
          label="操作"
          width="70"
          align="center"
          :column-key="6"
        >
          <template slot-scope="scope">
            <div>
              <!-- <img
                class="tool-icon"
                @click="download(scope.row.id)"
                src="../assets/download.svg"
                alt=""
              /> -->
              <img
                class="tool-icon"
                v-if="!scope.row.isBookmark"
                @click="bookmark(scope.row.no)"
                src="../assets/grey_star.svg"
                alt=""
              />
              <img
                class="tool-icon"
                v-else
                @click="bookmark(scope.row.no)"
                src="../assets/yellow_star.svg"
                alt=""
              />
              <!-- <img
                class="tool-icon"
                @click="reference(scope.row.id)"
                src="../assets/quote.svg"
                alt=""
              /> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      isAll: false,
      loading: true,
      resultData: [],
      searchContent: "",
      selected: [],
    };
  },
  created() {
    this.getHistory();
  },
  methods: {
    reference(paper_id) {
      console.log("reference " + paper_id);
      //引用
    },
    download(paper_id) {
      console.log("download " + paper_id);
      //下载
    },
    downloadSelected() {
      for (var i = 0; i < this.selected.length; i++) {
        this.download(this.selected[i].id);
      }
    },
    unbookmarkSelected() {
      for (var i = 0; i < this.resultData.length; i++) {
        if (this.resultData[i].isSelected) {
          this.resultData[i].isBookmark = false;
          //取消收藏
        }
      }
    },
    changeAll() {
      if (this.isAll) {
        for (var i = 0; i < this.resultData.length; i++) {
          this.resultData[i].isSelected = true;
        }
        this.selected = this.resultData;
        this.isAll = true;
      } else {
        for (i = 0; i < this.resultData.length; i++) {
          this.resultData[i].isSelected = false;
        }
        this.selected = [];
        this.isAll = false;
      }
    },
    handleSelectionChange(no) {
      if (this.resultData[no - 1].isSelected)
        this.selected.push(this.resultData[no - 1]);
      else {
        this.selected.map((val, i) => {
          if (val.no === no) {
            this.selected.splice(i, 1);
          }
        });
      }
      if (this.selected.length === this.resultData.length) {
        this.isAll = true;
      } else this.isAll = false;
    },
    async bookmark(showid) {
      console.log(this.resultData[showid - 1]);
      await this.$axios({
        method: "post",
        url: "/api/bookmark",
        data: this.$qs.stringify({
          paperId: this.resultData[showid - 1].id,
        }),
      }).then((res) => {
        console.log(res);
      });

      if (!this.resultData[showid - 1].isBookmark) {
        this.$message.success("收藏成功");
        console.log(this.resultData[showid - 1]);
        this.resultData[showid - 1].isBookmark = true;
        console.log(this.resultData[showid - 1]);
      } else {
        this.$message.success("取消收藏成功");
        console.log(this.resultData[showid - 1]);
        this.resultData[showid - 1].isBookmark = false;
        console.log(this.resultData[showid - 1]);
      }
    },
    calcAuthor(arr) {
      let str = "";
      var i = 0;
      if (arr.length == 0) return "";
      do {
        str += arr[i].name;
        if (i == arr.length - 1) break;
        str += ", ";
        i++;
      } while (i <= arr.length - 1);
      return str;
    },
    async getHistory() {
      await this.$axios({
        method: "get",
        url: "/api/getHistoryList",
      })
        .then((res) => {
          console.log(res.data);
          this.historyList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });

      for (let i = 0; i < this.historyList.length; i++) {
        await this.$axios({
          method: "get",
          url: "/api/getPaperPage?paperId=" + this.historyList[i].article,
        })
          .then((res) => {
            console.log(res.data);
            res.data.post.data[0].no = i + 1;
            this.resultData.push(res.data.post.data[0]);
            // this.bookmarkList=res.data.data
          })
          .catch((err) => {
            console.log(err);
          });
      }
      console.log(this.resultData);
      this.loading = false;
    },
    to_paper_info(row, column) {
      if (column.columnKey === 6) return;
      this.$router.push({ path: `/paperInfo/${row.id}` });
    },
  },
  computed: {
    selectedCount: function () {
      var c = 0;
      for (var i = 0; i < this.resultData.length; i++) {
        if (this.resultData[i].isSelected) c++;
      }
      return c;
    },
    filterData: function () {
      var input = this.searchContent && this.searchContent.toLowerCase();
      var items = this.resultData;
      var show;
      if (input) {
        show = items.filter(function (item) {
          return Object.keys(item).some(function (key) {
            return String(item[key]).toLowerCase().match(input);
          });
        });
      } else {
        show = items;
      }
      return show;
    },
  },
};
</script>
<style scoped>
.table-header {
  cursor: normal;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #777777 !important;
  border: 1px solid #777777 !important;
}
::v-deep .el-checkbox__inner:hover,
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #777777;
}
.tool-icon {
  width: 18px;
  margin: 0 1px;
  cursor: pointer;
}
.action input[type="checkbox"] {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  appearance: none;
  position: relative;
  cursor: pointer;
}
.action input[type="checkbox"]:hover:before {
  border: 1px solid #777777;
}
.action input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid #d9dce3;
  box-sizing: border-box;
  position: absolute;
}

.action input[type="checkbox"]:checked:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid #777777;
  background-color: #777777;
  box-sizing: border-box;
  position: absolute;
}
.action input[type="checkbox"]:checked:after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  box-sizing: border-box;
  position: absolute;
  transform: rotate(-135deg) translate(-120%, 25%);
}
.action {
  display: inline-block;
  margin: 0 15px;
  color: #777777;
}
.info-wrap {
  padding: 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
</style>